<!--
 * @Author: lihaogn
 * @Date: 2021-12-12 20:05:40
 * @LastEditTime: 2022-05-28 13:47:08
 * @LastEditor: lihaogn
 * @Description: 角色管理
 * @FilePath: \lix-admin-client-vue2\src\views\system\user-manage\role-list\index.vue
-->
<template>
  <LixTableView :show-tool="true">
    <template #tool-left>
      <!-- 新增 -->
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        size="small"
        @click="handleNewRole"
        >新增
      </el-button>
    </template>

    <template #table="{maxHeight}">
      <!-- 表格 -->
      <el-table
        :data="tableData"
        v-loading="loading"
        border
        :max-height="maxHeight"
      >
        <!-- 序号 -->
        <el-table-column label="#" type="index"></el-table-column>

        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <span v-if="item.prop == 'createdAt' || item.prop == 'updatedAt'">{{
              scope.row[item.prop] | dateFilter
            }}</span>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column label="操作" width="236px">
          <template slot-scope="scope">
            <el-button
              v-if="showOperation(scope.row)"
              type="text"
              size="medium"
              @click="openOfferPermissionDialog(scope.row)"
            >
              分配权限
            </el-button>
            <el-button
              v-if="showOperation(scope.row)"
              type="text"
              size="medium"
              @click="openEditDialog(scope.row)"
            >
              修改
            </el-button>
            <el-popconfirm
              v-if="showOperation(scope.row)"
              style="margin-left:10px;"
              placement="top"
              icon="el-icon-info"
              icon-color="red"
              title="确认删除？"
              @confirm="handleDelete(scope.row)"
            >
              <el-button slot="reference" type="text" size="medium"
                >删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <NewOrUpdateRoleDialog
      :visible.sync="roleDialogVisible"
      :type="operationType"
      :dialog-data="dialogData"
      @ok="getRoles"
    />

    <OfferPermissionDrawer
      :visible.sync="offerPermissionDrawerVisible"
      :drawer-data="drawerData"
      @ok="getRoles"
    />
  </LixTableView>
</template>

<script>
import LixTableView from '../../../../components/template/lix-table-view/index.vue'
import NewOrUpdateRoleDialog from './modules/NewOrUpdateRoleDialog.vue'
import OfferPermissionDrawer from './modules/OfferPermissionDrawer.vue'
import {
  reqDeleteRole,
  reqGetRoleList
} from '../../../../api/user-manage/role/api'
import { mapGetters } from 'vuex'

export default {
  components: { LixTableView, NewOrUpdateRoleDialog, OfferPermissionDrawer },
  data() {
    return {
      roleDialogVisible: false,
      offerPermissionDrawerVisible: false,
      loading: false,
      tableData: [
        {
          name: '超级管理员',
          description: '测试',
          updatedAt: '2021-12-12 23:59'
        }
      ],
      tableColumns: [
        {
          label: '角色名称',
          prop: 'name'
        },
        {
          label: '描述',
          prop: 'description'
        },
        {
          label: '创建时间',
          prop: 'createdAt'
        },
        {
          label: '修改时间',
          prop: 'updatedAt'
        }
      ],
      dialogData: {},
      operationType: 'NEW',
      drawerData: {}
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
    this.getRoles()
  },
  methods: {
    showOperation(row) {
      if (row.id === '001') {
        // 当前行数据是超级管理员
        if (this.userInfo.role.some(r => r.id === '001')) {
          // 当前用户是管理员
          return true
        }
        return false
      }
      return true
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-20 17:20:25
     * @description: 获取所有角色
     * @param {*}
     * @return {*}
     */

    async getRoles() {
      this.loading = true
      const res = await reqGetRoleList()
      if (res.success) {
        this.tableData = res.result
      }
      this.loading = false
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-20 17:20:17
     * @description: 新增角色
     * @param {*}
     * @return {*}
     */

    handleNewRole() {
      this.operationType = 'NEW'
      this.roleDialogVisible = true
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-19 22:03:50
     * @description: 打开修改对话框
     * @param {*} row
     * @return {*}
     */

    openEditDialog(row) {
      this.dialogData = row
      this.operationType = 'EDIT'
      this.roleDialogVisible = true
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-20 17:19:55
     * @description: 删除角色
     * @param {*} row
     * @return {*}
     */

    async handleDelete(row) {
      const res = await reqDeleteRole(row.id)
      if (res.success) {
        this.$message.success(res.message)
        this.getRoles()
      }
    },
    openOfferPermissionDialog(row) {
      // this.$message.info('该功能正在开发。。。')

      this.drawerData = row
      this.offerPermissionDrawerVisible = true
    }
  }
}
</script>

<style lang="less" scoped></style>
